import React, { Component } from 'react'
import Header from './components/Header'
import List from './components/List'
import Footer from './components/Footer'
import './css/app.css'

export default class App extends Component {

    state = {
        todos: [
            { id: '1', name: '吃饭', done: true },
            { id: '2', name: '睡觉', done: true },
            { id: '3', name: '学习', done: false }
        ]
    }

    // 添加新任务 
    addNewTodo = (newTodo) => {
        const { todos } = this.state
        this.setState({
            todos: [newTodo, ...todos]
        })
    }

    // 切换任务状态
    switchDone = (todoId, done) => {
        const { todos } = this.state
        this.setState({
            todos: todos.map(v => {
                if (v.id === todoId) v.done = done
                return v
            })
        })
    }

    // 删除任务
    deleteTodo = (todoId) => {
        const { todos } = this.state
        let index = todos.findIndex(v => v.id === todoId)
        todos.splice(index, 1)
        this.setState({ todos })
    }

    // 全选
    selectAll = (flag) => {
        const { todos } = this.state
        this.setState({
            todos: todos.map(v => {
                v.done = flag
                return v
            })
        })
    }

    render() {
        return (
            <div className="App">
                <Header addNewTodo={this.addNewTodo} />
                <List todos={this.state.todos} switchDone={this.switchDone} deleteTodo={this.deleteTodo} />
                <Footer todos={this.state.todos} deleteDone={this.deleteTodo} selectAll={this.selectAll} />
            </div>
        )
    }
}